<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/cssreset.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="shortcut icon" href="../favicon.ico" />
    <script src="../js/iconfont.js"></script>
</head>
<body>
<!--头部-->
<header class="top">
    <div class="container top_logoAndlogin" id="langAndlogin">
        <div class="top_logo col-md-4 col-sm-4 col-xs-12">
            <img src="../images/e93962cbac2ca6e4a95331f925a7b32d9127465b.svg" alt="">
        </div>
        <div class="top_login col-md-8 col-sm-8 col-xs-12">
            <ul>
                <li class="uk">
                    <p><a href=""><span></span>uk<b class="caret"></b></a></p>
                    <ol class="changelang">
                        <li><a href=""><span class="ico_one"></span>ireland</a></li>
                        <li><a href=""><span class="ico_two"></span>nederland</a></li>
                    </ol>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                    </svg>
                    <a href="login.html" class="logincss">login</a>
                </li>
            </ul>
        </div>
    </div>
    <!--导航栏-->
    <nav class="container header_nav" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <img src="../images/e93962cbac2ca6e4a95331f925a7b32d9127465b.svg" alt="">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar">一</span>
                    <span class="icon-bar">一</span>
                    <span class="icon-bar">一</span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <!-- navbar-default灰色 navbar-fixed-bottom变成底部栏 -->
                <ul class="nav_left nav navbar-nav">
                    <!-- 鼠标移动颜色会发生变化 -->
                    <!-- active：在Home这里加了一个默认状态 -->
                    <li class="active">
                        <a href="../index.html">subscribe</a>
                    </li>
                    <li><a href="shop.html">shop</a></li>
                    <li><a href="about_us.html">about</a></li>
                    <li><a href="UK_help.html">help</a></li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-liwu"></use>
                            </svg>
                            rewards
                        </a>
                    </li>
                    <li class="uk lang">
                        <p><a href=""><span></span>uk<b class="caret"></b></a></p>
                        <ol class="changelang">
                            <li><a href=""><span class="ico_one"></span>ireland</a></li>
                            <li><a href=""><span class="ico_two"></span>nederland</a></li>
                        </ol>
                    </li>
                    <li class="login">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yonghu"></use>
                        </svg>
                        <a href="#" class="logincss">login</a>
                    </li>
                    <li id="startbtn">
                        <button class="btn btn-success">get started ></button>
                    </li>
                </ul>
                <div class="nav_right">
                    <button class="btn btn-success">get started ></button>
                </div>
            </div>
        </div>
    </nav>
</header>

<!--登录表单-->
<div class="cont col-md-12 col-sm-12 col-xs-12">
    <div class="login_form col-md-8 col-sm-6 col-xs-12 col-md-offset-2 col-sm-offset-3">
        <div class="container col-md-8 col-sm-8 col-xs-12 col-md-offset-2 col-sm-offset-2">
            <h3>log in to graze</h3>
            <input type="text" placeholder="you@example.com" class="col-md-12 col-sm-12 col-xs-12">
            <br>
            <input type="text" placeholder="password" class="col-md-12 col-sm-12 col-xs-12">
            <p class="col-md-12 col-sm-12 col-xs-12">
                <input type="checkbox" checked>remember me
                <a href="">forgotten your password?</a>
            </p>
            <button type="button" class="btn btn-lg btn-success col-md-12 col-sm-12 col-xs-12">log in</button>
            <div class="col-md-12 col-sm-12 col-xs-12">not yet grazing?
                <a href="">get started ></a>
            </div>
        </div>
    </div>
</div>


<footer class="container col-md-12 col-sm-12 col-xs-12">
    <p class="svg_icon">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-icon-facebook"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-twitter2"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon--instagram"></use>
        </svg>
    </p>
    <div class="footer_con">
        <ul class="title col-md-12 col-sm-12 col-xs-12">
            <li class="col-md-3 col-sm-6 col-xs-6">careers</li>
            <li class="col-md-3 col-sm-6 col-xs-6">how it works</li>
            <li class="col-md-3 col-sm-6 col-xs-6">health</li>
            <li class="col-md-3 col-sm-6 col-xs-6">gifts</li>
            <li class="col-md-3 col-sm-6 col-xs-6">wholesale</li>
            <li class="col-md-3 col-sm-6 col-xs-6">in stores</li>
            <li class="col-md-3 col-sm-6 col-xs-6">help</li>
        </ul>
        <ul class="des col-md-10 col-sm-11 col-xs-11 col-md-offset-2 col-sm-offset-1 col-xs-offset-1">
            <li><a>terms</a></li>
            <li><a>privacy</a></li>
            <li><a>cookies</a></li>
            <li><a>modern slavery statement</a></li>
            <li><a>students</a></li>
            <li><a>get in touch</a></li>
            <li><a>press</a></li>
            <li><a>grazelabs.com</a></li>
        </ul>
        <p class="col-md-12 col-sm-12 col-xs-12">© 2020 nature delivered ltd</p>
    </div>
</footer>

<div class="footer_color col-md-12 col-sm-12 col-xs-12">
    <!--        <img src="images/download.svg" alt="">-->
    <span></span>
</div>
<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>